<template>
	<!-- #ifndef MP-WEIXIN -->
	<view>
		<el-card class="box-card" style="margin: auto">
			<el-row>
				<el-col :span="10" style="margin-top: 5px">Total {{ userList.length }} users</el-col>
				<el-col :span="8">
					<div class="demo-input-suffix">
						Search
						<el-input placeholder="用户名" prefix-icon="el-icon-search" v-model="keyword" style="width: 200px"
							@keypress.enter.native="search">
						</el-input>
					</div>
				</el-col>
			</el-row>
			<el-table :data="search().slice((currentPage-1)*pagesize,currentPage*pagesize)" style="width: 100%" border stripe>
				<el-table-column prop="username" label="用户昵称"> </el-table-column>
				<el-table-column prop="phone" label="手机账号"> </el-table-column>
				<el-table-column prop="avatar" label="头像">
					<template slot-scope="scope">
						<u-avatar :src="scope.row.avatar"></u-avatar>
					</template>
				</el-table-column>
				<el-table-column prop="per_signature" label="个性签名"> </el-table-column>
				<el-table-column prop="sex" label="性别"> </el-table-column>
				<el-table-column prop="create_time" label="创建时间"> </el-table-column>
				<el-table-column fixed="right" label="操作" width="150">
					<template slot-scope="scope">
						<el-button type="primary" icon="el-icon-edit" circle
							@click="editUser(scope.row)"></el-button>
						<el-button type="danger" icon="el-icon-delete" circle @click="delUser(scope.$index)">
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-row style="margin-top: 25px">
				<el-col>
					<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
						:current-page="currentPage" :page-sizes="[5, 10, 20, 40]" :page-size="pagesize"
						layout="total, sizes, prev, pager, next, jumper" :total="totaluser">
					</el-pagination>
				</el-col>
			</el-row>
		</el-card>
	</view>
	<!-- #endif -->
</template>

<script>
	export default {
		data() {
			return {
				keyword: "",
				currentPage: 1, //初始页
				pagesize: 10,
				userList: [],
				totaluser: 0,
			};
		},
		methods: {
			search() {
				if (this.keyword == "") {
					this.totaluser = this.userList.length
					return this.userList;
				}
				//	return this.getUserList();
				let result = this.userList.filter((element) => {
					return element.username.includes(this.keyword);
				});
				this.totaluser = this.userList.length
				return result;
			},
			//删除用户
			delUser(index) {
				let id =  this.userList[index].id
				uni.showModal({
					title: '温馨提示',
					content: '确定要取删除用户吗？',
					success: res => {
						if (res.confirm) {
							uni.request({
								url: 'http://localhost:8081/user/deleteById?id='+id,
								method: 'DELETE',
								success: (res) => {
									console.log(res)
									if (res.data.state == 200) {
										this.userList.splice(index, 1);
										this.$message({
											type: "success",
											message: "删除成功!",
										});
									}
								}
							});
						}
					}
				})
			},
			//编辑用户
			editUser(data) {
				this.$emit("editPage", data);
			},
			// 初始页currentPage、初始每页数据数pagesize和数据data
			handleSizeChange(size) {
				this.pagesize = size;
				//  console.log(this.pagesize)  //每页下拉显示数据
			//	this.getUserList();
			},
			handleCurrentChange(currentPage) {
				this.currentPage = currentPage;
			//	this.getUserList();
				// console.log(this.currentPage)  //点击第几页
			},
			//获取用户信息
			getUserList() {
				uni.request({
					url: 'http://localhost:8081/user/getAll',
					method: 'GET',
					data: {

					},
					success: (res) => {
						this.userList = res.data
					}
				});
			},
		},
		mounted() {
			this.getUserList();
		},
	};
</script>

<style>
	.el-row {
		margin-bottom: 15px;
	}
</style>
